import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

const MetricSection = ({ 
  title, 
  color, 
  iconPath, 
  chartId, 
  value, 
  chartData, 
  networkData, 
  showIO = false 
}) => {
  const colorClasses = {
    emerald: {
      bg: 'bg-emerald-50',
      text: 'text-emerald-600',
      border: 'border-emerald-200',
      chart: '#10b981'
    },
    amber: {
      bg: 'bg-amber-50',
      text: 'text-amber-600',
      border: 'border-amber-200',
      chart: '#f59e0b'
    },
    violet: {
      bg: 'bg-violet-50',
      text: 'text-violet-600',
      border: 'border-violet-200',
      chart: '#8b5cf6'
    },
    blue: {
      bg: 'bg-blue-50',
      text: 'text-blue-600',
      border: 'border-blue-200',
      chart: '#3b82f6'
    }
  };

  const colorClass = colorClasses[color] || colorClasses.blue;

  const formatValue = (val) => {
    if (val === null || val === undefined) return '0.0';
    return val.toFixed(1);
  };

  const formatUnit = () => {
    if (showIO) return 'MB';
    return '%';
  };

  const prepareChartData = () => {
    if (showIO && networkData) {
      return networkData.timestamps?.map((timestamp, index) => ({
        time: timestamp,
        sent: networkData.sent?.[index] || 0,
        received: networkData.received?.[index] || 0
      })) || [];
    }
    
    if (chartData) {
      return chartData.timestamps?.map((timestamp, index) => ({
        time: timestamp,
        value: chartData.values?.[index] || 0
      })) || [];
    }
    
    return [];
  };

  const chartDataPoints = prepareChartData();

  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 h-full flex flex-col">
      <div className="px-4 py-3 border-b border-gray-200">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <div className={`p-1.5 rounded-md ${colorClass.bg} ${colorClass.border} border`}>
              <svg className={`w-4 h-4 ${colorClass.text}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={iconPath} />
              </svg>
            </div>
            <div>
              <h3 className="text-sm font-semibold text-gray-900">{title}</h3>
              {!showIO && (
                <div className="text-lg font-bold text-gray-900">
                  {formatValue(value)}{formatUnit()}
                </div>
              )}
            </div>
          </div>
        </div>
        
        {showIO && networkData && (
          <div className="mt-2 flex space-x-4">
            <div>
              <span className="text-xs text-gray-500">Sent:</span>
              <span className="ml-1 text-sm font-semibold text-gray-900">
                {formatValue(networkData.sent?.[networkData.sent.length - 1] || 0)} MB
              </span>
            </div>
            <div>
              <span className="text-xs text-gray-500">Received:</span>
              <span className="ml-1 text-sm font-semibold text-gray-900">
                {formatValue(networkData.received?.[networkData.received.length - 1] || 0)} MB
              </span>
            </div>
          </div>
        )}
      </div>
      
      <div className="flex-1 p-4">
        <div className="h-full">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart data={chartDataPoints} margin={{ top: 5, right: 20, left: 10, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
              <XAxis 
                dataKey="time" 
                stroke="#6b7280"
                fontSize={10}
                tickLine={false}
                axisLine={false}
              />
              <YAxis 
                stroke="#6b7280"
                fontSize={10}
                tickLine={false}
                axisLine={false}
                tickFormatter={(value) => `${value}${formatUnit()}`}
              />
              <Tooltip 
                contentStyle={{
                  backgroundColor: 'white',
                  border: '1px solid #e5e7eb',
                  borderRadius: '8px',
                  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
                }}
                labelStyle={{ color: '#374151', fontWeight: '600' }}
              />
              {showIO ? (
                <>
                  <Line 
                    type="monotone" 
                    dataKey="sent" 
                    stroke="#3b82f6" 
                    strokeWidth={2}
                    dot={false}
                    name="Sent"
                  />
                  <Line 
                    type="monotone" 
                    dataKey="received" 
                    stroke="#10b981" 
                    strokeWidth={2}
                    dot={false}
                    name="Received"
                  />
                </>
              ) : (
                <Line 
                  type="monotone" 
                  dataKey="value" 
                  stroke={colorClass.chart} 
                  strokeWidth={2}
                  dot={false}
                />
              )}
            </LineChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  );
};

export default MetricSection; 